<style>
.quick-div {
    position:fixed;
    bottom:0;
    left:0px;
    z-index:900;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.quick-phone>div {
    width:32px;
    height:32px;
    border-radius:32px;
    -moz-box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25);
    box-shadow:0 0 0 3px #FFFFFF, 0 2px 5px 3px rgba(0, 0, 0, 0.25);
    background:#B70000;
    position:absolute;
    bottom:0;
    left:0;
    margin-bottom:20px;
    margin-left:20px;
    z-index:900;
    -webkit-transition: -webkit-transform 200ms;
}
.quick-phone>div a{
    color:#fff;
    font-size:20px;
}
.quick-phone>div label{
    display: none;
}
.quick-phone>div a:before{
    margin:5px 0 0 5px;
}

.quick-phone>div.on:nth-of-type(1) {-webkit-transform: translate(0, -100px) rotate(720deg);}
.quick-phone>div.on:nth-of-type(2) {-webkit-transform: translate(47px, -81px) rotate(720deg);}
.quick-phone>div.on:nth-of-type(3) {-webkit-transform: translate(81px, -45px) rotate(720deg);}
.quick-phone>div.on:nth-of-type(4) {-webkit-transform: translate(100px, 0) rotate(720deg);}

.quick-div.model1>div{
    border-top:2px solid #51515d;
    position:fixed;
    z-index:900;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
    max-width:640px;
    display:block;
    width:100%;
    background:rgba(255,255,255,0.7);
    height:48px;
    overflow:hidden;
    display:-webkit-box;
    display:box;
    -webkit-box-orient: horizontal;
    background:-webkit-gradient(linear, 0 0, 0 100%, from(#333c45), to(#313540), color-stop(50%, #373a43));
}
.quick-div.model1 input{display:none;}

.quick-div.model1 .quick-phone>div{
    width:auto!important;
    height:100%;
    position:static!important;
    margin:0;
    border-radius:0!important;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
    -webkit-box-flex: 1;
    box-flex:1;
    -webkit-box-sizing:border-box;
    overflow:hidden;
    box-shadow: none!important;
    border-right:1px solid #0e111a;
    border-left:1px solid #666a73;
    background:none;
}

.quick-div.model1 .quick-phone>div a:before {
    width:90%;
    text-align:center;
}
.quick-div.model1 .quick-phone>div label{
    margin:0 5px;
    font-size:12px;
    display:block!important;
    line-height:18px;
    text-align:center;
    overflow:hidden;
}

.quick-div.model1+.quick-wrap{
    display:block!important;
    height:50px;

}
.quick-div.model1 .quick-phone>div a{
    line-height:20px!important;
}
</style>

<div class="quick-div model1">
	<div id="quick-phone" class="quick-phone">
		{php $i = 1;}
		{loop $_W['quickmenu']['menus'] $nav}
		<div>
			<a href="{$nav['url']}" class="{$nav['css']['icon']['icon']}" style="{$nav['css']['icon']['style']}">
				<label style="{$nav['css']['name']}">{$nav['name']}</label>
			</a>
		</div>
		{php if($i>=5) break;}
		{php $i++;}
		{/loop}
	</div>
</div>